<template>
  <div class="PageTabs">
    <div class="tabItem">
      <span :class="{ actived: args.focusId == 'food' }" @click="args.focus('food')">商品</span>
    </div>
    <div class="tabItem">
      <span :class="{ actived: args.focusId == 'comment' }" @click="args.focus('comment')">评价</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['args']
};
</script>

<style lang="scss">
@import '../../../styles/mixin';
.PageTabs {
  display: flex;
  background-color: #fff;
  padding: 0.3rem 0 0.6rem;
  border-bottom: 1px solid #ebebeb;
  .tabItem {
    flex: 1;
    text-align: center;
    span {
      @include sc(0.65rem, #666);
      padding: 0.2rem 0.1rem;
      border-bottom: 0.12rem solid #fff;
    }
    .actived {
      color: #3190e8;
      border-color: #3190e8;
    }
  }
}
</style>